﻿import QtQuick 2.0
import QtQuick.Controls 2.12

// QML自带的ScrollView会影响鼠标事件，没找到解决方法，所以重写了一个……

Item{


    id: root

    // public ===================================================================

    height: 200*dp
    width: 200*dp

    property bool isScrollX: contentItem.width > root.width
    property bool isScrollY: contentItem.height > root.height

    property bool contentClip: true     // 滚动内容裁剪

    property real wheelDirect: 1        // 滚轮触发滚动的方向 默认竖向


    // private ===================================================================
    property real maxContentX: root.width - contentItem.width
    property real maxContentY: root.height - contentItem.height
    property real contentX: 0       // 滚动位置
    property real contentY: 0

    onMaxContentXChanged: {
        contentX = Math.min(Math.max(contentX, maxContentX), 0)
    }
    onMaxContentYChanged: {
        contentY = Math.min(Math.max(contentY, maxContentY), 0)
    }

//     鼠标滚轮交互
    MouseArea{
        anchors.fill: parent
        onWheel: {
            if(wheelDirect === 1){
                contentY = Math.min(Math.max(contentY + wheel.angleDelta.y * 0.5*dp, maxContentY), 0)
            }else{
                contentX = Math.min(Math.max(contentX + wheel.angleDelta.y * 0.5*dp, maxContentX), 0)
            }

        }
    }

    property var contentItem: Rectangle{
        height: 500*dp
        width: 500*dp
        color: Qt.rgba(1, 0, 0, 0.1)
        Text{
            anchors.fill: parent
            wrapMode: Text.WordWrap
            text: "AWA"
        }
    }


    onContentXChanged: {
        contentItem.x = contentX
    }onContentYChanged: {
        contentItem.y = contentY
    }

    Item{
        clip: root.contentClip
        anchors.fill: parent
        Control {

            id: control

            height: root.contentItem.height
            width: root.contentItem.width

            contentItem: root.contentItem

        }
    }


    // 水平滚动条
    Item{
        id: horScrollBar
        visible: isScrollX
        width: parent.width
        height: 6*dp
        Rectangle{
            id: horbar
            height: 6*dp
            width: 50*dp
            radius: width*0.5
            color: Qt.rgba(0, 0, 0, 0.2)
            x: (contentX / maxContentX) * (parent.width - width)
            MouseArea{
                property real startX
                property bool isPressed: false
                hoverEnabled: true
                anchors.fill: parent
                focus: true
                preventStealing: true
                onPressed: {
                    isPressed = true
                    startX = mouseX
                    parent.color = Qt.rgba(0, 0, 0, 0.4)
                }
                onPositionChanged: {
                    if(!isPressed)  return
                    var movePercent = (mouseX-startX)/(horScrollBar.width-horbar.width)
                    contentX += movePercent*maxContentX
                    contentX = Math.max(Math.min(contentX, 0), maxContentX)
                }
                onReleased: {
                    isPressed = false
                    parent.color = Qt.rgba(0, 0, 0, 0.2)
                }
            }
        }
        y: parent.height - height
    }
    // 垂直滚动条
    Item{
        id: verScrollBar
        visible: isScrollY
        width: 6*dp
        height: parent.height
        Rectangle{
            id: verbar
            height: 50*dp
            width: 6*dp
            radius: width*0.5
            color: Qt.rgba(0, 0, 0, 0.2)
            y: (contentY / maxContentY) * (parent.height - height)
            MouseArea{
                property real startY
                property bool isPressed: false
                hoverEnabled: true
                anchors.fill: parent
                focus: true
                preventStealing: true
                onPressed: {
                    isPressed = true
                    startY = mouseY
                    parent.color = Qt.rgba(0, 0, 0, 0.4)
                }
                onPositionChanged: {
                    if(!isPressed)  return
                    var movePercent = (mouseY-startY)/(verScrollBar.height-verbar.height)
                    contentY += movePercent*maxContentY
                    contentY = Math.max(Math.min(contentY, 0), maxContentY)

                }
                onReleased: {
                    isPressed = false
                    parent.color = Qt.rgba(0, 0, 0, 0.2)
                }
            }
        }
        x: parent.width - width
    }
}


